<template>
<div class="modal-wrapper">

  <!--@dblclick.prevent.stop='toHidden'-->
  <div class="ui long basic modal editModal" >
    <div class="content">
      <editCom v-if="popContentShow" :modal_info='info' @toHidden='toHidden' @toClearInterval='toClearInterval' :forModal="forModal"></editCom>

    </div>
  </div>
</div>
</template>
<script type="text/ecmascript-6">
import editCom from 'components/edit/editCom'
import tool from 'src/util/tool';
 import util from '_util/index';

export default {
  data() {
    return {
      popContentShow: false,
      forModal: true,
      interval_cleared: false,
      interval: null,
      info: {}
    }
  },
  components: {
    editCom
  },
  methods: {
    toClearInterval() {
        window.setTimeout(()=> {
          window.clearInterval(this.interval);
          this.interval_cleared=true
        }, 2000);
    },
    toHidden() {
      this.popContentShow = false;
      $(this.selector).modal('hide');
      // let event = this.$store.state.global.modalEvent;
      // let eventVue = util.store.get(this,'eventVue');
      // eventVue.$emit(event)
    },
    setmyInterVal(){
      this.interval = window.setInterval(()=> {
        $(this.selector).modal('refresh');
      }, 500);
    },
    setModalContent(info) {
      this.popContentShow = true
      this.info = info
    }
  },
  watch: {
    popContentShow(n, o) {
      if(n) {
        if(!this.interval&&!this.interval_cleared) {
          this.setmyInterVal();
        }

      }else{
          window.clearInterval(this.interval)
          this.interval=null;
      }

    },
    'info.mid'(n, o) {
      if(n!=o) {
        if(this.interval_cleared) {
          this.interval_cleared = false;
          this.setmyInterVal();
        }

      }

    },
    modalShow(n, o) {
      // tool.cl(n, o)
      if (n != o) {
        if (n) {
          let _that = this
          $(this.selector).modal({
            // blurring: true,
            duration: 100,
            allowMultiple: true,
            onHidden: function() {
              this.popContentShow = false;
              _that.$emit('modalHidden')
              util.store.push(_that, 'set_in_modal','in_modal',false,false,'global');
            },
            onVisible: function () {
              util.store.push(_that, 'set_in_modal','in_modal',false,true,'global');
            },
          }).modal('show').modal('refresh');
        } else {
          this.popContentShow = false;
          $(this.selector).modal('hide');
        }
      }
    }
  },
  props: {
    modalShow: {},
  },
  computed:{
    selector() {
      return '.ui.long.basic.modal.editModal';
    },
  },
  created() {

    let eventVue = util.store.get(this,'eventVue');
    eventVue.$on('setModalContent', this.setModalContent)
  },
  mounted() {


  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>@dir: "common/";
.modal-wrapper {

}
</style>
